<template>
  <div class="p-4 space-y-4">
    <div class="text-xl font-bold text-blue-700 mb-2">Tabbar</div>
    <div class="text-gray-700 mb-2">
      底部导航栏组件，基于 Vant4 van-tabbar 封装，自动路由切换，适配底部安全区。
    </div>
    <div class="bg-white rounded-xl p-4 shadow">
      <div class="font-bold mb-2 text-blue-600">用法</div>
      <pre class="bg-blue-50 rounded p-3 text-sm text-blue-700 overflow-x-auto"><Tabbar />
<!-- 自动渲染首页、功能、文档、我的四个 tab，支持路由切换和底部安全区适配 -->
</pre>
    </div>
    <div class="bg-white rounded-xl p-4 shadow">
      <div class="font-bold mb-2 text-green-600">示例1</div>
      <pre class="bg-green-50 rounded p-3 text-sm text-green-700 overflow-x-auto"><!-- 默认用法 -->
<Tabbar /></pre>
    </div>
    <div class="bg-white rounded-xl p-4 shadow">
      <div class="font-bold mb-2 text-green-600">示例2</div>
      <pre
        class="bg-green-50 rounded p-3 text-sm text-green-700 overflow-x-auto"
      ><!-- 可自定义 tabbar-item（如需扩展） -->
<!-- 目前为固定四项，如需扩展请修改 Tabbar.vue 源码 -->
</pre>
    </div>
    <div class="bg-white rounded-xl p-4 shadow border-l-4 border-blue-400">
      <div class="font-bold mb-2 text-gray-700">说明</div>
      <div class="text-xs text-gray-600 leading-relaxed">
        适配移动端底部安全区，自动高亮当前路由，支持 van-tabbar 的所有原生属性。<br />
        如需自定义 tab 项，请修改组件源码。
      </div>
    </div>
  </div>
</template>
